<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{ padding: 0; margin: 0;}
        li{ list-style: none;}
        img{ border: 0;}
        .roll{ width: 880px; height: 108px; margin:50px auto 0; position: relative;}
        .btn_left{ top:18px; left: 0; display: block; width: 68px; height: 68px; background: url("images/btn.jpg") no-repeat -65px 0; position: absolute; }
        .btn_left:hover{ background: url("images/btn.jpg") no-repeat -65px -69px;}
        .btn_right{ top:18px; right: 0; display:block; width: 68px; height: 68px; background: url("images/btn.jpg") no-repeat; position: absolute; }
        .btn_right:hover{ background: url("images/btn.jpg") no-repeat 0 -69px;}
        .roll .warp{ width: 728px; height: 108px; margin: 0 auto; position: relative; overflow: hidden; }
        .roll ul{ position: absolute; top: 0; left: 0;}
        .roll li{ float: left; width: 182px; height: 108px;}
        .control{ font-size: 18px; position: relative; width: 300px; height: 25px; margin: 8px auto 0; padding: 10px 10px;}
    </style>
</head>
<body>
<div class="control">
    <label id="chk_pause"><input type="checkbox" checked="checked"/>间隔停顿</label>
    <select id="pause_time">
        <option value="100">短</option>
        <option value="1000" selected="selected">中</option>
        <option value="3000">长</option>
    </select>
    滚动速度:
    <select id="sel_speed">
        <option value="2">slow</option>
        <option value="5" selected="selected">middle</option>
        <option value="10">quick</option>
    </select>
    <!--//4个  :link  :active :hover :visited-->

</div>
<div class="roll" id="roll">
    <a href="javascript:void(0);" class="btn_left"></a>
    <a href="javascript:void(0);" class="btn_right"></a>
    <div class="warp">
        <ul>
            <li><a href="#"><img src="images/1.jpg"/></a></li>
            <li><a href="#"><img src="images/2.jpg"/></a></li>
            <li><a href="#"><img src="images/3.jpg"/></a></li>
            <li><a href="#"><img src="images/4.jpg"/></a></li>
        </ul>
    </div>
</div>
<script>
    window.onload = function() {
        var oDiv = document.getElementById('roll');
        var oUl  = oDiv.getElementsByTagName('ul')[0];
        var oLi = oUl.getElementsByTagName('li');
        var oBtn1 = oDiv.getElementsByTagName('a')[0];
        var oBtn2 = oDiv.getElementsByTagName('a')[1];
        var iSpeed = 5;
        var pause = true;

        var con = document.getElementById('control');
        var btn_pause = document.getElementById('chk_pause');
        var pause_time = document.getElementById('pause_time');
        var sel_speed  = document.getElementById('sel_speed');
//        var pause = con.getElementsByTagName('input')[0].checked;


        oUl.innerHTML += oUl.innerHTML;
//        var oUl = oDiv.getElementsByClassName('warp');
        oUl.style.width = oLi[0].offsetWidth * oLi.length + 'px';
        setInterval(function() {
            oUl.style.left = oUl.offsetLeft - iSpeed + 'px';
            if(oUl.offsetLeft < -oUl.offsetWidth / 2) {
                oUl.style.left = '0px';
            }
            if(oUl.offsetLeft > 0) {
                oUl.style.left = -oUl.offsetWidth/2 + 'px';
            }
            
        },30);

        oBtn1.onmousemove = function() {
            iSpeed = 5;
        };
        oBtn2.onmousemove = function() {
            iSpeed = -5;
        };
        btn_pause.onclick = function() {
            pause = con.getElementsByTagName('input')[0].checked;
        };
        pause_time.onchange = function() {
            res_time =parseInt(this.value);
        };
        sel_speed.onchange = function() {
            res_speed = parseInt(this.value);
        };
    };
</script>
</body>
</html>